<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
</head>
<body>
<div id="content">
    <!--my commodity information-->
    <div class="modal fade" id="my-commodity-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title text-primary">{{ commodity.name }}</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body card">
                    <img class="card-image-top" style="width: 100%;" :src="imageUrl(commodity.image)">
                    <div class="card-body">
                        <h5>{{ commodity.description }}</h5>
                        <kbd class="bg-warning">{{ commodity.type }}</kbd>
                    </div>
                    <h6 class="text-secondary">
                        生产商：{{ commodity.producer.name }}&ensp;地址：{{ commodity.producer.location }}&ensp;
                        联系电话：{{ commodity.producer.contactNumber }}&ensp;
                    </h6>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--my pet information-->
    <div class="modal fade" id="my-pet-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title"><b class="text-primary">{{ pet.petName }}</b> 的身份信息</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body card">
                    <img class="card-image-top" style="width: 100%;" :src="imageUrl(pet.petImage)">
                    <div class="card-body">
                        <h5>{{ pet.description }}</h5>
                        <h6 class="text-info">出生于：{{ pet.birthDate }}</h6>
                        <h6 class="text-info">品种是<kbd>{{ pet.speciesName }}</kbd></h6>
                        <h6 class="text-info">品种特点是：{{ pet.speciesDescription }}</h6>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--sign out-->
    <div class="modal fade" id="user-logout">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">确认注销吗？</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <a href="#" class="btn btn-danger close" data-dismiss="modal" @Click="logout">&ensp;确认&ensp;</a>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--register-->
    <div class="modal fade" id="user-register">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">请输入注册信息</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group-sm">
                        <h6 class="text-info">用户名</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="name" placeholder="输入大于等于 2 位的用户名，用于显示">
                        &ensp;<h6 class="text-info">账号</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="loginName" placeholder="输入大于等于 6 位的账号，用于登录">
                        &ensp;<h6 class="text-info">密码</h6>
                        <input type="password" class="form-control password-field" style="width: 90%;" v-model="password" placeholder="输入大于等于 6 位的密码">
                        &ensp;<h6 class="text-info">确认密码</h6>
                        <input type="password" class="form-control password-field" style="width: 90%;" v-model="re_password" placeholder="请再次输入密码">
                        <h6 class="text-info">联系电话</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="phoneNumber" placeholder="请输入 11 位的号码">
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="!fields_empty" @Click="checkAndRegister">确认注册</button>
                        <span class="text-danger">&emsp;{{ errorMessage }}</span>
                        <span class="text-primary">&emsp;{{ message }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--login box & information-->
    <div id="user-data-box">
        <div id="user-login-box">
            <h3 class="text-secondary">请登录</h3>
            <div class="form-inline">
                <div class="input-group-sm">
                    &ensp;账号&ensp;
                    <input type="text" class="form-control" style="width: 8rem;" v-model="loginVO.loginName" placeholder="请输入账号">
                    &ensp;密码&ensp;
                    <input type="password" class="form-control" style="width: 8rem;" v-model="loginVO.password" placeholder="请输入密码">
                    <button class="btn btn-link border-0 btn-secondary" @Click="login">登录</button>
                    <button class="btn btn-link border-0 btn-secondary" data-toggle="modal" data-target="#user-register" @Click="clear_register_message">注册</button>
                    <span class="text-danger">&emsp;{{ loginErrorMessage }}</span>
                </div>
            </div>
        </div>
        <div id="user-info-box" style="display: none;">
            <h1>Hello,&ensp;<span class="text-primary">{{ name }}</span>
                <button class="btn btn-sm btn-link border-0 btn-primary float-sm-right"
                        data-toggle="modal" data-target="#user-logout" v-if="is_logged_in">注销</button></h1>

            <div v-show="show_pet_orders">
                <h3 class="text-secondary">我的宠物领养记录</h3>
                <div class="table-responsive">
                    <table class="table table-light table-striped table-sm text-center">
                        <thead class="thead">
                        <tr>
                            <th>名称</th>
                            <th>物种</th>
                            <th>领养日期</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="petOrder in petOrders" :key="petOrder.id">
                            <td>{{ petOrder.petName }}</td>
                            <td>{{ petOrder.speciesName }}</td>
                            <td>{{ petOrder.adoptionDate }}</td>
                            <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                        data-target="#my-pet-info" @click="render_my_pet_modal_box(petOrder.id)">查看详情</button>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div v-show="show_commodity_orders">
                <h3 class="text-secondary">我的商品购买记录</h3>
                <div class="table-responsive">
                    <table class="table table-light table-striped table-sm text-center">
                        <thead class="thead">
                        <tr>
                            <th>名称</th>
                            <th>类型</th>
                            <th>生产厂商</th>
                            <th>购买日期</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="commodityOrder in commodityOrders" :key="commodityOrder.id">
                            <td>{{ commodityOrder.commodity.name }}</td>
                            <td>{{ commodityOrder.commodity.type }}</td>
                            <td>{{ commodityOrder.commodity.producer.name }}</td>
                            <td>{{ commodityOrder.transactionDate }}</td>
                            <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                        data-target="#my-commodity-info" @click="render_my_commodity_modal_box(commodityOrder.id)">查看详情</button>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div v-show="show_reservations">
                <h3 class="text-secondary">我的服务预订</h3>
                <div class="table-responsive">
                    <table class="table table-light table-striped table-sm text-center">
                        <thead class="thead">
                        <tr>
                            <th>服务提供商</th>
                            <th>联系电话</th>
                            <th>预订日期</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="reservation in reservations" :key="reservation.id">
                            <td>{{ reservation.providerName}}</td>
                            <td>{{ reservation.providerNumber}}</td>
                            <td>{{ reservation.reservationDate }}</td>
                            <td><button class="btn btn-sm btn-link border-0 btn-secondary" @click="delete_reservation(reservation.id)">取消预订</button>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>